'use client'

import React from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import IconButton from '@/components/common/IconButton'
import { useKeyboardEvent } from '@react-hookz/web'

export default function Pagination({ total, page, limit, leftDisabled, leftOnClick, rightDisabled, rightOnClick }) {
  useKeyboardEvent(
    true,
    (e) => {
      if (e.key === 'ArrowLeft' && !leftDisabled) { leftOnClick?.() }
      else if (e.key === 'ArrowRight' && !rightDisabled) { rightOnClick?.() }
    },
    undefined,
    [leftDisabled, rightDisabled, leftOnClick, rightOnClick]
  )

  if (!total || total <= limit) return null

  return (
    <div className='sticky bottom-0 bg-gradient-to-t from-white to-[#f1f1f11a] z-10 py-2 px-4 mt-2 rounded-t-xs'>
      <div className='flex justify-between items-center'>
        <div className='text-sm'>共 {total} 条数据</div>
        <div className='flex gap-2 justify-center align-center'>
          <div className='w-fit'> <IconButton onClick={leftOnClick} disabled={leftDisabled}> <ChevronLeft color='#FFFFFF' /> </IconButton> </div>
          <div className='text-sm flex gap-1 items-center'> 第{page} {total ? <span> / {Math.ceil(total / limit)} </span> : null}页 </div>
          <div className='w-fit'> <IconButton onClick={rightOnClick} disabled={rightDisabled}> <ChevronRight color='#FFFFFF' /> </IconButton> </div>
        </div>
        <div className='text-sm'>每页 {limit} 条</div>
      </div>
    </div>
  )
}
